<div class="layui-fluid layui-anim febs-anim" id="competitorSite-update" lay-title="修改竞争对手油站信息">
    <div class="layui-row layui-col-space8 febs-container">
        <div class="layui-tab layui-tab-card">
		  <ul class="layui-tab-title">
		    <li class="layui-this">油站信息</li>
		    <li>地图信息</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">
				<div class="layui-card">
	                <div class="layui-card-body">
	                    <form class="layui-form" action="" lay-filter="competitorSite-form-elements">
	                    <div class="layui-form-item febs-hide">
			            <label class="layui-form-label febs-form-item-require">油站id：</label>
			            <div class="layui-input-block">
			                <input type="text" name="siteid" data-th-value="${competitorsite.siteid}">
			            </div>
			        </div>
	                        <div class="layui-row layui-col-space10 layui-form-item">
	                            <div class="layui-col-lg4">
	                                <label class="layui-form-label febs-form-item-require">油站编码：</label>
	                                <div class="layui-input-block">
	                                    <input type="text" disabled name="siteCode" data-th-value="${competitorsite.siteCode}" lay-verify="required" autocomplete="off" class="layui-input">
	                                </div>
	                            </div>
	                            <div class="layui-col-lg4">
	                                <label class="layui-form-label febs-form-item-require">油站名称：</label>
	                                <div class="layui-input-block">
	                                    <input type="text" disabled name="siteName" data-th-value="${competitorsite.siteName}" lay-verify="required" autocomplete="off" class="layui-input">
	                                </div>
	                            </div>
	                            <div class="layui-col-lg4">
	                                <label class="layui-form-label febs-form-item-require">地理区域：</label>
		                            <div class="layui-input-block">
							           <input type="text" disabled name="siteArea" id="competitorsite-update-area" lay-filter="competitorsite-update-area"
                       class="layui-input">
		                            </div>
	                            </div>
	                        </div>
	                        
	                        <div class="layui-form-item">
	                        	<div class="layui-col-lg4">
		                            <label class="layui-form-label">地址：</label>
		                            <div class="layui-input-block">
		                                <input type="text" disabled name="siteAddress" data-th-value="${competitorsite.siteAddress}" lay-verify="required" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
	                        	<div class="layui-col-lg4">
		                        	<div class="layui-inline">
			                            <label class="layui-form-label febs-form-item-require">位置</label>
			                            <div class="layui-input-inline" style="width: 70px;">
			                                <input disabled type="text" name="longitude" id="longitude" data-th-value="${competitorsite.longitude}" lay-verify="required" placeholder="经度" autocomplete="off"
			                                       class="layui-input">
			                            </div>
			                            <div class="layui-form-mid">，</div>
			                            <div class="layui-input-inline" style="width: 70px;">
			                                <input disabled type="text" name="latitude" id="latitude" data-th-value="${competitorsite.latitude}" lay-verify="required" placeholder="纬度" autocomplete="off"
			                                       class="layui-input">
			                            </div>
			                        </div>
		                        </div>	
		                        <div class="layui-col-lg4">
		                        	<div class="layui-inline">
			                            <label class="layui-form-label febs-form-item-require">销售油品：</label>
			                            <div class="layui-input-block">
		                                	<select disabled name="oilCode"
							                        lay-verify="required"
							                        xm-select-direction="down"
							                        xm-select="oilCode_select"
							                        xm-select-show-count="1"
							                        xm-select-skin="default">
							                </select>
		                            	</div>
			                        </div>
		                        </div>	
	                        </div>
	                        
	                        <div class="layui-form-item">
	                        	
		                       <div class="layui-col-lg4">
		                            <label class="layui-form-label febs-form-item-require">开业时间：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="openDate" id="febs-form-group-date" data-th-value="${competitorsite.openDate}" lay-verify="date|required"
		                                       placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">道路类型：</label>
		                            <div class="layui-input-block">
		                                <select disabled name="roadType" lay-verify="">
		                                	<option th:value="${rt.did}" th:each="rt:${listroadType}" th:text="${rt.dictName}"></option>
				                        </select>
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">商圈描述：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="tradeArea" data-th-value="${competitorsite.tradeArea}" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
		                        
		                    </div>
	                        <div class="layui-form-item">
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">油站类型：</label>
		                            <div class="layui-input-block">
		                                <select disabled name="siteType" lay-verify="">
		                                	<option th:value="${st.did}" th:each="st:${listsiteType}" th:text="${st.dictName}"></option>
				                        </select>
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">服务类型：</label>
		                            <div class="layui-input-block">
		                                <select disabled name="serviceType" lay-verify="">
		                                	<option th:value="${set.did}" th:each="set:${listserviceType}" th:text="${set.dictName}"></option>
				                        </select>
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">油站等级：</label>
		                            <div class="layui-input-block">
		                                <select disabled name="siteLevel" lay-verify="">
		                                	<option th:value="${sl.did}" th:each="sl:${listsiteLevel}" th:text="${sl.dictName}"></option>
				                        </select>
		                            </div>
		                        </div>
	                        </div>
	                        
	                        <div class="layui-form-item">
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">经理等级：</label>
		                            <div class="layui-input-block">
		                                <select disabled name="siteManagerLevel" lay-verify="">
		                                	<option th:value="${ml.did}" th:each="ml:${listsiteManagerLevel}" th:text="${ml.dictName}"></option>
				                        </select>
		                            </div>
		                        </div>
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">经理姓名：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="siteManagerName" data-th-value="${competitorsite.siteManagerName}" lay-verify="required" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">油站座机：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="sitePhone" data-th-value="${competitorsite.sitePhone}" lay-verify="required" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
	                        </div>
	                        <div class="layui-form-item">
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">油站设施：</label>
		                            <div class="layui-input-block">
		                                <select disabled name="siteFacilities" lay-verify="">
		                                	<option th:value="${fl.did}" th:each="fl:${listsiteFacilities}" th:text="${fl.dictName}"></option>
				                        </select>
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">车流量：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="trafficFlow" data-th-value="${competitorsite.trafficFlow}" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">前庭面积：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="siteServiceArea" data-th-value="${competitorsite.siteServiceArea}" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
	                        </div>
	                        
	                        <div class="layui-form-item">
		                        
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">油罐数量：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="oilTank" lay-verify="required" data-th-value="${competitorsite.oilTank}" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">油岛数量：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="oilIsland" lay-verify="required" data-th-value="${competitorsite.oilIsland}" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">92#油枪：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="oilGun92" lay-verify="required" data-th-value="${competitorsite.oilGun92}" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
	                        </div>
	                        <div class="layui-form-item">
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">95#油枪：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="oilGun95" lay-verify="required" data-th-value="${competitorsite.oilGun95}" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">0#油枪：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="oilGun0" lay-verify="required" data-th-value="${competitorsite.oilGun0}" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">资产类型：</label>
		                            <div class="layui-input-block">
		                                <select disabled name="propertyType" lay-verify="">
		                                	<option th:value="${pt.did}" th:each="pt:${listpropertyType}" th:text="${pt.dictName}"></option>
				                        </select>
		                            </div>
		                        </div>
	                        </div>
	                        
	                        <div class="layui-form-item">
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">壳牌站：</label>
		                            <div class="layui-input-block">
		                            <select disabled name="shellSiteid" lay-verify="">
		                                	<option th:value="${shellsite.siteid}" th:each="shellsite:${listshellsite}" th:text="${shellsite.siteName}"></option>
				                        </select>
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">距离：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="distance" data-th-value="${competitorsite.distance}" placeholder="千米" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">同侧异侧：</label>
		                            <div class="layui-input-block">
		                            	<select disabled name="siteSide" lay-verify="">
		                                	<option th:value="${ss.did}" th:each="ss:${listSiteSide}" th:text="${ss.dictName}"></option>
				                        </select>
		                            </div>
		                        </div>
		                     </div>
	                        <div class="layui-form-item">
	                        	<div class="layui-col-lg4">
		                        	<label class="layui-form-label">供应商：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="supplier" data-th-value="${competitorsite.supplier}" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">NP商圈：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="text" name="npTradeArea" data-th-value="${competitorsite.npTradeArea}" autocomplete="off" class="layui-input">
		                            </div>
		                        </div>
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">运营类型：</label>
		                            <div class="layui-input-block">
		                                <select disabled name="operateType" lay-verify="">
		                                	<option th:value="${ot.did}" th:each="ot:${listoperateType}" th:text="${ot.dictName}"></option>
				                        </select>
		                            </div>
		                        </div>
		                      </div>
	                        <div class="layui-form-item">
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">油站品牌：</label>
		                            <div class="layui-input-block">
		                                <select disabled name="siteBrand" lay-verify="">
		                                	<option th:value="${sb.did}" th:each="sb:${listSiteBrand}" th:text="${sb.dictName}"></option>
				                        </select>
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">标签：</label>
		                            <div class="layui-input-block">
		                            	<select disabled name="siteTags"
							                        lay-verify="required"
							                        xm-select-direction="down"
							                        xm-select="siteTags_select"
							                        xm-select-skin="default">
							                </select>
		                            </div>
		                        </div>
		                        
		                        <div class="layui-col-lg4">
		                        	<label class="layui-form-label">服务区：</label>
		                            <div class="layui-input-block">
		                                <input disabled type="checkbox" name="serviceArea" id="serviceArea" lay-filter="febs-form-group-switch" lay-skin="switch" value=0 lay-text="是|否">
		                            </div>
		                        </div>
		                        
	                        </div>
	                       
	                        <div class="layui-form-item febs-hide">
						            <button class="layui-btn" lay-submit="" lay-filter="competitorSite-update-form-submit" id="submit"></button>
						            <button type="reset" class="layui-btn" id="reset"></button>
						        </div>
	                    </form>
	                </div>
	            </div>
			</div>
			<div class="layui-card layui-tab-item map">
	            <div class="layui-card-body" id="container">
	            </div>
	        </div>
		  </div>
		</div>
    </div>
</div>

<script>
    layui.use(['febs', 'form', 'formSelects', 'laydate', 'treeSelect'], function () {
        var $ = layui.$,
            febs = layui.febs,
            element = layui.element,
            layer = layui.layer,
            laydate = layui.laydate,
            treeSelect = layui.treeSelect,
            formSelects = layui.formSelects,
            form = layui.form,
            sname = '[[${competitorsite.siteName}]]',
            siteAreas = [[${competitorsite.siteArea}]],
            oilcodes = '[[${competitorsite.oilCode}]]',
            siteTags = '[[${competitorsite.siteTags}]]',
            $view = $('#competitorSite-update');

        formSelects.render();
        form.render();
        
        form.val("competitorSite-form-elements", {
        	"roadType":'[[${competitorsite.roadType}]]',
        	"siteType":'[[${competitorsite.siteType}]]',
        	"serviceType":'[[${competitorsite.serviceType}]]',
        	"operateType":'[[${competitorsite.operateType}]]',
        	"siteLevel":'[[${competitorsite.siteLevel}]]',
        	"siteManagerLevel":'[[${competitorsite.siteManagerLevel}]]',
        	"siteFacilities":'[[${competitorsite.siteFacilities}]]',
        	"propertyType":'[[${competitorsite.propertyType}]]',
        	"shellSiteid":'[[${competitorsite.shellSiteid}]]',
        	"siteSide":'[[${competitorsite.siteSide}]]',
        	"siteBrand":'[[${competitorsite.siteBrand}]]'
        });
        
        var shellData = [
            {
                icon: "febs/images/avatar/[[${competitorsite.siteBrand}]].png",
                content: sname,
                longitude: $('#longitude').val(),
                latitude: $('#latitude').val()
            }
        ];
        
        $view.find('#container').css({"height": document.documentElement.clientHeight - 97 + 'px'});
        // 定义需要动态引入的js文件列表
        var scriptArr = ['http://api.map.baidu.com/getscript?v=2.0&ak=seKuYX6fgCSPPD1Kw20jGRmAHZkDMa4V', 'http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js','http://api.map.baidu.com/library/CityList/1.4/src/CityList_min.js'];
        // 从索引i=0的文件开始引入，i++直到最后一个引入完成后回调callback
        loadScript(scriptArr,0, function () {
            var map = new BMap.Map("container", {});// 创建Map实例
            var point = new BMap.Point($('#longitude').val(),$('#latitude').val());
            var myIcon1 = new BMap.Icon("/febs/images/avatar/[[${competitorsite.siteBrand}]].png", new BMap.Size(24,24));
            var marker = new BMap.Marker(point,{icon:myIcon1});
            map.centerAndZoom(point,12);// 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom();//启用滚轮放大缩小
            map.addOverlay(marker);
            
            var nowHc2=document.documentElement.clientHeight/2;//算出高的一半
            var nowWc2=$(window).width()/2;//宽的一半
            map.panBy(nowWc2,nowHc2);//定位
            
            //addMarker(point1, myIcon1, sContent1);
            
            // map.addEventListener("click", function (e) {
            //     layer.msg('获取位置成功');
            // });

            var local = new BMap.LocalSearch(map, {
                renderOptions:{map: map},
                onMarkersSet: function(res) {
                    res.forEach(function(e, i) {
                        /* var marker = e.marker;
                        marker.addEventListener("click", function() {
                        	var _val = e.point.lng + "," + e.point.lat;
                        	layui.jquery("#coordinatesValue").val(_val);
                        	$('#longitude').val(e.point.lng);
                        	$('#latitude').val(e.point.lat);
                        }); */
                    })

                }
            });
            //搜索
            layui.jquery("#btnSearch").on("click", function () {
                var searchValue = layui.jquery("#searchValue").val();
                local.search(searchValue);
            });
            // 编写自定义函数,创建标注
            function addMarker(point, myIcon, sContent){
                var marker = new BMap.Marker(point, {icon:myIcon});
                var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
                map.addOverlay(marker);

                marker.addEventListener("click", function(){
                    this.openInfoWindow(infoWindow);
                    //图片加载完毕重绘infowindow
                    document.getElementById('imgDemo').onload = function (){
                        infoWindow.redraw();   //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
                    }
                });
            }

            for (var i = 0; i < shellData.length; i++) {
                var myIcon = new BMap.Icon(shellData[i].icon, new BMap.Size(24,24));
                var point = new BMap.Point(shellData[i].longitude, shellData[i].latitude);
                var sContent =
                    "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+shellData[i].content+"</h4>" +
                    "<img style='float:right;margin:4px' id='imgDemo' src=' "+shellData[i].icon+ "' height='104' title=' "+shellData[i].icon+ "'/>" +
                    //"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+shellData[i].content+"</p>" +
                    "</div>";

                    addMarker(point, myIcon, sContent)
            }
        });

        //加载地图
        function loadScript(arr, i, callback){
            var script = document.createElement('script');
            script.type = 'text/javascript';
            /*if else 这几句话必须要写到这位置处，不能放最后，因为if中js加载中script.readyState存在好几种状态，
             只有状态改变‘readystatechange’事件才会触发，但现在浏览器加载速度很快，当解析到该事件时JS有可能已经加载完，
             所以事件根本不会触发，所以要写到前面*/
            if(script.readystate){//兼容IE
                script.onreadystatechange = function() {//状态改变事件才触发
                    if(script.readyState == 'loaded' || script.readyState == 'complete'){
                        if(i==arr.length-1){
                            console.log("LoadScript callback: "+arr[i]);
                            callback();
                        }else{
                            loadScript(arr,i+1,callback);
                        }
                        script.onreadystatechange = null;
                    }
                }
            }else{
                script.onload = function(e){
                    if(i==arr.length-1){
                        console.log("LoadScript callback: "+arr[i]);
                        callback();
                    }else{
                        loadScript(arr,i+1,callback);
                    }
                }
            }
            script.src = arr[i];
            document.body.appendChild(script);
            console.log("LoadScript: "+arr[i]);
        }

        laydate.render({
            elem: '#febs-form-group-date',
            type: 'date',
            trigger: 'click'
        });
        
        treeSelect.render({
            elem: $view.find('#competitorsite-update-area'),
            type: 'get',
            data: ctx + 'dictsite/parentTree/4',
            placeholder: '请选择',
            search: false,
            style: {
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            success: function () {
            	treeSelect.checkNode('competitorsite-update-area', siteAreas);
            }
        });
        
        
        formSelects.config('oilCode_select', {
            searchUrl: ctx + 'dictsite/parentSelect/20',
            response: {
                statusCode: 200
            },
            beforeSuccess: function (id, url, searchVal, result) {
                var data = result.data;
                var tranData = [];
                for (var i = 0; i < data.length; i++) {
                    tranData.push({
                        name: data[i].dictName,
                        value: data[i].did
                    })
                }
                result.data = tranData;
                return result;
            },
            success: function () {
            	formSelects.value('oilCode_select', oilcodes.split(','));
            },
            error: function (id, url, searchVal, err) {
                console.error(err);
                febs.alert.error('获取油品列表失败');
            }
        });
        
        formSelects.config('siteTags_select', {
            searchUrl: ctx + 'dictsite/parentSelect/75',
            response: {
                statusCode: 200
            },
            beforeSuccess: function (id, url, searchVal, result) {
                var data = result.data;
                var tranData = [];
                for (var i = 0; i < data.length; i++) {
                    tranData.push({
                        name: data[i].dictName,
                        value: data[i].did
                    })
                }
                result.data = tranData;
                return result;
            },
            success: function () {
            	formSelects.value('siteTags_select', siteTags.split(','));
            },
            error: function (id, url, searchVal, err) {
                console.error(err);
                febs.alert.error('获取标签列表失败');
            }
        });
        
        /* 监听指定开关 */
       form.on('switch(febs-form-group-switch)', function (data) {
        	if(data.elem.checked) {
        		$('#serviceArea').val(1);
        	}else{
        		$('#serviceArea').val(0);
        	}
        });

        form.on('submit(competitorSite-update-form-submit)', function (data) {
            febs.post(ctx + 'competitor/update', data.field, function () {
            	layer.closeAll();
            	febs.alert.success('修改成功');
            	 $('#febs-competitorSite').find('#csitequery').click();
            });
            return false;
        });
    });
</script>